import { NTag } from 'naive-ui';

import type { TableFieldProps } from '@/components/table/src/base-table-field';
import { BaseTableField } from '@/components/table/src/base-table-field';
import { useColorType } from '@/components/table/src/hooks/use-color-type';

export const BooleanTableField = defineComponent<TableFieldProps>({
  name: 'BooleanTableField',
  extends: BaseTableField,
  setup(props) {
    const value = computed(() => props.rowData[props.field.key] ?? props.field.defaultValue);
    const type = computed(() => {
      const colorType = props.field.booleanOptions?.colorType;
      return useColorType(value.value, props.rowData, colorType);
    });

    const text = computed(() => {
      const options = props.field?.booleanOptions;
      return {
        trueText: options?.trueText ?? '是',
        falseText: options?.falseText ?? '否',
      };
    });
    return () => (
      <NTag size='small' type={type.value}>
        {value.value ? text.value.trueText : text.value.falseText}
      </NTag>
    );
  },
});
